<template>
  <div class="vx-result">
    <!-- 图片 -->
    <div class="vx-result-header">
      <img :src="require(`@/assets/image/common/${imgUrl}.png`)" onerror="this.classList.add('error')" alt="结果图片" class="img-title" />
    </div>
    <!-- 标题 -->
    <p class="vx-result-title">{{ title }}</p>
    <!-- 交易流水号 详情 -->
    <div class="vx-result-detail" v-if="showSerialNum">
      <div>操作流水号： {{ obj.logId }}</div>
      <div class="mg-top-5">交易时间： {{ obj.operTime }}</div>
      <slot name="detail"> </slot>
    </div>
    <!-- 其他内容 -->
    <div class="info">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: 'vx-result',
  props: {
    // 标题
    title: {
      type: String,
      default: '',
    },
    // 结果详情数据
    resDetail: {
      // 结果信息
      type: Object,
      default: () => ({}),
    },
    // 结果状态图片
    url: {
      type: String,
      default: 'success-green',
      validator: function (url) {
        return ['success-green', 'warning', 'error', 'trading'].includes(url);
      },
    },
    // 展示交易流水号
    showSerialNum: {
      // 显示交易流水号
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      obj: '',
      imgUrl: this.url,
    };
  },
  watch: {
    resDetail: {
      handler(val) {
        this.obj = val;
        if (this.obj.code) {
          this.imgUrl = this.obj.code === '200' ? 'success-green' : 'error';
        }
      },
      immediate: true,
    },
  },
};
</script>

<style lang="scss">
.vx-result {
  height: 100%;
  text-align: center;
  margin-bottom: 20px;
  .vx-result-header {
    margin-bottom: 20px;
    .img-title {
      width: 88px;
      height: 88px;
    }
  }
  .vx-result-title {
    font-size: 22px;
    font-weight: $font-weight-bold;
    color: $color-text-primary;
    line-height: 22px;
    margin-bottom: 20px;
  }
  .vx-result-detail {
    font-size: $s14;
    font-weight: $font-weight-normal;
    color: $color-text-secondary;
    line-height: 14px;
  }
  .info {
    font-size: $s14;
    font-weight: $font-weight-normal;
    color: $color-text-regular;
    line-height: 16px;
    margin-top: 10px;
  }
}
</style>
